<template>
    <div class="leafer-wb">
        <div class="container">
            <div id="leafer-wb-container"/>
        </div>
        <leafer-wb-menu />
        <leafer-wb-operate />
    </div>
</template>
<script lang="ts" setup>
import {Leafer, Rect} from 'leafer-ui'
import {onMounted} from "vue";
import LeaferWbMenu from "@/pages/graph/leafer-wb/components/menu/index.vue";
import LeaferWbOperate from "@/pages/graph/leafer-wb/components/operate/index.vue";

let leafer: Leafer | null = null;

onMounted(() => {
    leafer = new Leafer({
        view: 'leafer-wb-container'
    });
    const rect = new Rect({
        x: 100,
        y: 100,
        width: 200,
        height: 200,
        fill: '#32cd79',
        draggable: true
    })
    leafer.add(rect)
})

</script>
<style lang="less">
.leafer-wb {
    position: relative;
    height: 100%;
    width: 100%;

    .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

#leafer-wb-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
